<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 1.3.使用父组件 -->
        <father-cpn></father-cpn>

        <child2-cpn></child2-cpn>


    </div>
    <script src="./vue.js"></script>
    <script>

        // 2.1 创建子组件构造器
        let childCom=Vue.extend({
            template:`
                <li>西瓜</li>            
            `
        })


        // 1.1.创建组件父组件构造器
        let faterCom = Vue.extend({
            template: `
            <div>
                <h1>父组件</h1>
                // 2.3 在父组件中使用子组件
                <child-cpn></child-cpn>
            </div>
            `,
            // 2.2 在父组件中注册子组件:在那个父组件里面注册的子组件，就只能用于那个父组件
            components:{
                "child-cpn":childCom
            }
        })

        

        // 1.2.注册全局组件
        Vue.component("father-cpn",faterCom);


        let app = new Vue({
            el: "#app",
            data: {},
            components:{
                "child2-cpn":childCom
            }
        })
    </script>
</body>

</html>